<template>
    <div class="indexcontent">
        <pageHeader ref="header"></pageHeader>
        <div class="section option-section">
            <div class="section-main option-main">
                <div class="pagerouter">
                    <router-link tag="a" :to="{name:'index'}" class="pagerouter-item pagerouter-a">首页</router-link>
                    <span class="pagerouter-arrow">></span>
                    <router-link tag="a" :to="{name:'Ordercenter'}" class="pagerouter-item pagerouter-a">合同中心
                    </router-link>
                </div>
                <div class="option-wrap option-orderwrap">
                   <div class="option-ordernav">
                       <div class="option-ordernav-item active">全部</div>
                       <div class="option-ordernav-item">待签署</div>
                       <div class="option-ordernav-item">已签署</div>
                       <div class="option-ordernav-item">已过期</div>
                   </div>
                    <div class="clearfix option-sortline">
                        <div class="option-sortline-left option-sortline-label">日期</div>
                        <div class="option-sortline-left option-sortline-main">
                            <DatePicker type="daterange" v-model="dateRange" @on-change="changeRange" :options="options2" placement="bottom-end" placeholder="选择日期" style="width: 200px"></DatePicker>
                        </div>
                    </div>
                    <div class="clearfix option-sortline">
                        <div class="option-sortline-left option-sortline-label">类型</div>
                        <div class="option-sortline-left option-sortline-main">
                            <div class="option-sort-item">全部</div>
                            <div class="option-sort-item active">授权协议</div>
                            <div class="option-sort-item">融宝协议</div>
                            <div class="option-sort-item">申请书</div>
                        </div>
                    </div>
                    <div class="option-table">
                        <div class="option-table-line option-table-hd">
                            <div class="option-table-td">发送时间</div>
                            <div class="option-table-td">合同名称</div>
                            <div class="option-table-td">合同类型</div>
                            <div class="option-table-td">合同编号</div>
                            <div class="option-table-td">当前状态</div>
                            <div class="option-table-td">合同详情</div>
                        </div>
                        <div class="option-table-line option-table-bd">
                            <div class="option-table-td fontcolor99">2018-05-22 10:13:36</div>
                            <div class="option-table-td">最高额担保合同</div>
                            <div class="option-table-td">融保协议</div>
                            <div class="option-table-td">R20190920334</div>
                            <div class="option-table-td">已签署</div>
                            <div class="option-table-td"><span class="checkdetail" @click="toSignDetails">查看详情</span></div>
                        </div>
                        <div class="option-table-line option-table-bd">
                            <div class="option-table-td fontcolor99">2018-05-22 10:13:36</div>
                            <div class="option-table-td">最高额担保合同</div>
                            <div class="option-table-td">融保协议</div>
                            <div class="option-table-td">R20190920334</div>
                            <div class="option-table-td">已签署</div>
                            <div class="option-table-td"><span class="checkdetail" @click="toSignDetails">查看详情</span></div>
                        </div>
                    </div>
                    <div class="paging">
                        <Page :total="100" :current="currentNum" />
                    </div>
                </div>
            </div>
        </div>
        <pageFooter/>
    </div>
</template>

<script>
    import pageHeader from '@/components/pageHeader'
    import pageFooter from '@/components/pageFooter'
    import {mapMutations} from 'vuex'

    export default {
        name: 'ordercenter',
        components: {
            pageHeader,
            pageFooter
        },
        data() {
            return {
                currentNum:1,
                dateRange:'',
                options2: {
                    shortcuts: [
                        {
                            text: '近一周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            }
                        },
                        {
                            text: '近一个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            }
                        },
                        {
                            text: '近三个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            }
                        }
                    ]
                }
            }
        },
        watch:{

        },
        created() {

        },
        computed: {},

        mounted() {

        },
        beforeDestroy() {

        },
        methods: {
            changeRange(e){
                console.log(e)
                //console.log(this.formItem.date)
            },
            toSignDetails(){
              this.$router.push({
                  name:'Ordersign'
              })
            },
        }
    }
</script>

<style scoped lang="scss">

</style>
